"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { CollectionCard } from "@/components/collections/collection-card"
import { useLanguage } from "@/context/language-context"

export default function CollectionsPage() {
  const { dictionary } = useLanguage()

  const collections = [
    {
      name: dictionary.collection1Name,
      description: dictionary.collection1Description,
      imageSrc: "/placeholder.svg?height=400&width=600",
      link: "/products?collection=classics", // Example link
    },
    {
      name: dictionary.collection2Name,
      description: dictionary.collection2Description,
      imageSrc: "/placeholder.svg?height=400&width=600",
      link: "/products?collection=modern", // Example link
    },
    {
      name: dictionary.collection3Name,
      description: dictionary.collection3Description,
      imageSrc: "/placeholder.svg?height=400&width=600",
      link: "/products?collection=nature", // Example link
    },
  ]

  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-1 py-12 md:py-20 bg-white dark:bg-gray-800">
        <div className="container mx-auto px-4 md:px-6">
          <h1 className="text-4xl md:text-5xl font-bold text-center mb-12 text-gray-900 dark:text-gray-50">
            {dictionary.ourCollectionsTitle}
          </h1>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {collections.map((collection, index) => (
              <CollectionCard
                key={index}
                name={collection.name}
                description={collection.description}
                imageSrc={collection.imageSrc}
                link={collection.link}
              />
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
